<template>
  <!-- 任务信息 -->
  <div class="user-tasks borderStyle">
    <div class="user-tasks-title smallCenterTitle centerbox">任务信息</div>
    <div class="user-tasks-operate">
      <el-form ref="elForm" :model="formData" size="medium" label-width="1.5rem">
        <el-row>
          <el-col :span="8">
            <el-form-item label="开锁任务名称:">
              <el-input
                v-model="formData.rwxfName"
                placeholder="请输入姓名"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开锁任务类别:">
              <el-select
                v-model="formData.rwxfRwlx"
                size="small"
                placeholder="请选择"
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开锁人员姓名:">
              <el-select
                v-model="formData.staName"
                size="small"
                placeholder="请选择"
                :style="{width: '100%'}"
                @change="getPersonArea"
              >
                <el-option
                  v-for="(item,index) in options2"
                  :key="index"
                  :label="item.personName"
                  :value="item.personCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="任务ID:">
              <el-input
                v-model="formData.rwxfId"
                placeholder="请输入"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="开始结束时间:">
              <el-date-picker
                :style="{width: '100%'}"
                v-model="formData.TaskTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="btn-ground endbox">
              <el-button class="table-query" type="primary" @click="cancelForm">重新选择</el-button>
              <el-button class="table-query" type="primary" @click="submitForm">任务下发</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="user-tasks-content betweenbox mediumtablestyle">
      <div class="content-one">
        <el-table
          border
          :data="tableData1"
          @current-change="handleSelectionChange1"
          style="width: 100%"
          highlight-current-row
          height="100%"
        >
          <el-table-column prop="areaName" label="区域"></el-table-column>
        </el-table>
      </div>
      <div class="content-two">
        <el-table
          :data="tableData2"
          @current-change="handleSelectionChange2"
          style="width: 100%"
          highlight-current-row
          height="100%"
        >
          <el-table-column prop="deviceName" label="设备"></el-table-column>
          <el-table-column prop="areaName" label="区域"></el-table-column>
        </el-table>
      </div>
      <div class="content-one">
        <el-table :data="tableData3" style="width: 100%" height="100%">
          <el-table-column prop="deviceName" label="柜门"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="user-tasks-btn endbox">
      <el-button type="primary" @click="showHistoricalRecord">开锁反馈历史记录</el-button>
    </div>
    <!-- 开锁反馈历史记录弹窗 -->
    <el-dialog
      :title="dialogTitle1"
      top="15vh"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <HistoricalRecord v-if="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import HistoricalRecord from "./popup/HistoricalRecord.vue";
import { LocksAPIModule } from "@/store/modules/locks";
interface optionList {
  value: string;
  label: string;
}
@Component({
  components: {
    HistoricalRecord,
  },
})
export default class UserTasks extends Vue {
  options: Array<optionList> = [
    {
      value: "全部",
      label: "全部",
    },
    {
      value: "有序",
      label: "有序",
    },
    {
      value: "无序",
      label: "无序",
    },
  ];
  options2: Array<optionList> = [];
  formData = {
    rwxfRwlx: "",
    rwxfName: "",
    staName: "", //人员id
    rwxfId: "",
    TaskTime: [],
  };
  // 区域id
  areaId: string = "";

  // 控制弹窗
  dialogTitle1 = "开锁反馈历史记录";
  dialogVisible = false;
  tableData1: any = [];
  tableSelect1: any[] = [];
  tableData2: any = [];
  tableSelect2: any[] = [];
  tableData3: any = [];
  tableSelect3: any[] = [];

  get stationId() {
    return LocksAPIModule.stationId;
  }

  @Watch("stationId")
  public aaaa() {
    this.getPersonDropDown();
  }

  mounted() {}
  // 1.监听stationId-根据变电站获取人员下拉选
  getPersonDropDown() {
    var params = {
      stationId: this.stationId,
    };
    // console.log(params);
    (this as any).$services
      .getPersonDropDown({ data: params })
      .then((result: any) => {
        if (result.data) {
          // console.log(result);
          this.options2 = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 2.人员下拉框change事件-根据人员获取区域信息
  getPersonArea() {
    var params = {
      personCode: this.formData.staName,
    };
    // console.log(params);

    (this as any).$services
      .getPersonArea({ data: params })
      .then((result: any) => {
        this.tableData1 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 3.表格1选择事件-根据区域获取设备信息
  getDeviceByQyId() {
    if (this.areaId && this.formData.staName) {
      var params = {
        areaId: this.areaId,
        personId: this.formData.staName,
      };
      // console.log(params);

      (this as any).$services
        .getDeviceByQyId({ data: params })
        .then((result: any) => {
          this.tableData2 = result.data;
          // console.log(result);
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }
  // 选择表格1，调取“根据区域获取设备信息”的接口
  handleSelectionChange1(val: any): void {
    // console.log(val);
    this.tableSelect1 = val;
    this.areaId = val.areaId;
    this.getDeviceByQyId();
  }
  // 选择表格2，把一条数据给到表格3
  handleSelectionChange2(val: any): void {
    // console.log(val);
    this.tableSelect2 = val;
    var truefalse = false;
    this.tableData3.map((k) => {
      if (k.deviceCode === val.deviceCode) {
        truefalse = true;
      }
    });
    if (truefalse) {
      this.$message({
        type: "warning",
        message: "数据重复，请重新选择",
      });
    } else {
      this.tableData3.push(val);
    }
  }
  // handleSelectionChange3(val: any): void {
  //   console.log(val);
  //   this.tableSelect3 = val;
  // }

  // 任务下发
  submitForm() {
    if (this.tableData3.length > 0) {
      var deviceData = this.tableData3;
      var deviceNames = [];
      var deviceCodes = [];
      deviceData.map((k, j) => {
        deviceNames[j] = k.deviceName;
        deviceCodes[j] = k.deviceCode;
      });
      var deviceNamestr = deviceNames.join(",");
      var deviceCodestr = deviceCodes.join(",");

      var params = {
        rwJhjssj: this.formData.TaskTime[1],
        rwJhkssj: this.formData.TaskTime[0],
        rwxfId: this.formData.rwxfId,
        rwxfName: this.formData.rwxfName,
        rwxfRwlx: this.formData.rwxfRwlx,
        sbAreacode: deviceData[0].sbAreacode,
        sbAreaname: deviceData[0].sbAreaname,
        sbCode: deviceCodestr,
        sbName: deviceNamestr,
      };
      (this as any).$services
        .insertTaskSend({ data: params, method: "post" })
        .then((result: any) => {
          if (result.success) {
            this.$message({
              type: "success",
              message: result.message,
            });
          } else {
            this.$message({
              type: "info",
              message: result.message,
            });
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    } else {
      this.$message({
        type: "warning",
        message: "请选择要下发的数据",
      });
    }
  }
  // 重新选择
  cancelForm() {
    this.formData = {
      rwxfRwlx: "",
      rwxfName: "",
      staName: "", //人员id
      rwxfId: "",
      TaskTime: [],
    };
    this.tableData1 = [];
    this.tableData2 = [];
    this.tableData3 = [];
  }

  // 历史记录弹窗开
  showHistoricalRecord() {
    this.dialogVisible = true;
  }
  // 历史记录弹窗关
  handleClose() {
    this.dialogVisible = false;
  }
}
</script>

<style lang="scss" scoped>
.user-tasks {
  width: 100%;
  height: 100%;
  padding-top: 0.25rem;
  box-sizing: border-box;
  &-title {
    width: 4.32rem;
    height: 0.36rem;
    margin: auto;
    color: #fff;
  }
  &-operate {
    width: 100%;
    height: 1rem;
    // display: flex;
    // flex-flow: wrap;
    box-sizing: border-box;
    padding: 0 0.1rem;
    margin: 0.1rem 0 0 0;

    > div {
      width: 32%;
      span {
        width: 1.5rem;
        padding-left: 0.1rem;
        box-sizing: border-box;
      }
      .demonstration {
        width: 3rem;
      }
    }
  }
  &-operatebtn {
    width: 97%;
    height: 0.4rem;
  }
  &-content {
    width: 100%;
    height: calc(100% - 2.05rem);
    // margin-top: 0.05rem;
    // margin-left: 1.5%;
    box-sizing: border-box;
    padding: 0 0.1rem;
    // margin: 0.1rem 0 0 0;
    .content-one,
    .content-three {
      width: 2.49rem;
      height: 100%;
      background: rgba(2, 71, 142, 0.23);
      border: 1px solid #02478e;
      .title {
        width: 100%;
        height: 0.29rem;
      }
      .context {
        width: 100%;
        height: calc(100% - 0.29rem);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
      }
    }
    .title-name {
      padding: 0.05rem;
    }
    .line {
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(0, 252, 255, 0) 0%,
        rgba(0, 252, 255, 0.9) 47%,
        rgba(0, 252, 255, 0) 100%
      );
      opacity: 0.8;
      margin: auto;
    }
    .big-line {
      width: 2.2rem;
    }
    .small-line {
      width: 1.03rem;
    }
    .content-two {
      width: 4.04rem;
      height: 100%;
      background: rgba(2, 71, 142, 0.23);
      border: 1px solid #02478e;
      .title {
        width: 94%;
        margin: auto;
      }
    }
  }
  &-btn {
    width: 97%;
    height: 0.5rem;
  }
}
</style>
<style lang="scss">
.user-tasks {
  // 时间框的宽度
  .el-date-editor {
    .el-range__icon {
      line-height: 0.26rem;
    }
    .el-range__close-icon {
      width: 0;
    }
    .el-range-separator {
      line-height: 0.26rem;
      width: 14%;
    }
  }
  .el-range-editor.el-input__inner {
    padding: 3px 3px;
  }
  .el-form-item {
    margin-bottom: 0.12rem;
  }
}
</style>